<template>
  <view class="container">
    <z-paging-swiper>
      <view slot="top">
        <u-navbar left-icon="back" height="50" title="施工队详情"></u-navbar>
        <view class="content-top">
          <view class="info-view" @click="routeTo">
            <view class="info-top">
              <view class="">
                <text>{{ userInfo.name.substr(0, 1) + '**' }}</text>
                <view class="sign"> 已实名 </view>
                <view class="sign-info">
                  {{ userInfo.sex == 1 ? '男' : '女' }}-{{ formatTime(userInfo.birthday) }}-经验{{
                    userInfo.workYear
                  }}年
                </view>
              </view>
              <view class="info_box-title-right">
                <view class="">
                  <text class="title-right-item1">参与项目</text>
                  <text class="title-right-item2">{{ userInfo.enrollCount }}次</text>
                </view>
                <view class="">
                  <text class="title-right-item1">综合评分</text>
                  <text class="title-right-item2">{{ userInfo.scores }}分</text>
                </view>
              </view>
            </view>
            <view class="info-desc">
              {{ userInfo.content }}
            </view>
          </view>
        </view>
        <view class="tabsView">
          <u-tabs-swiper
            ref="uTabs"
            :list="tabsList"
            :current="current"
            @change="tabsChange"
            :is-scroll="false"
            :show-bar="false"
            active-color="#0F76BC"
            swiper-width="750"
          >
          </u-tabs-swiper>
        </view>
      </view>

      <swiper class="swiperView" :current="current" @animationfinish="animationfinish">
        <swiper-item class="swiperItem">
          <z-paging
            ref="paging1"
            v-model="itemList1"
            @query="queryList"
            :fixed="true"
            :auto="false"
            :empty-view-img="`${getImageUrl('empty.png')} `"
            empty-view-text="暂无订单数据~"
          >
            <view class="content-imgs" v-for="(item, index1) in itemList1" :key="index1">
              <view class="content-box" @click="routeTo(item)">
                <image
                  class="case-cover"
                  :src="item.coverUrl"
                  width="710rpx"
                  height="400rpx"
                  mode=""
                ></image>
                <view class="case-desc">
                  <view class="content-box-desc">
                    {{ item.title }}
                  </view>
                  <!-- <view class="content-box-address">
										{{userInfo.exceptWorkCity}}
									</view> -->
                  <view class="content-box-address">
                    {{ formatTime(item.createTime) }}
                  </view>
                </view>
              </view>
            </view>
          </z-paging>
        </swiper-item>

        <swiper-item class="swiperItem">
          <z-paging
            ref="paging2"
            v-model="itemList2"
            @query="queryList2"
            :fixed="true"
            :auto="false"
            :empty-view-img="`${getImageUrl('empty.png')} `"
            empty-view-text="暂无订单数据~"
          >
            <view class="comment-area">
              <view class="comment-area">
                <view class="comment-box" v-for="(item, index1) in itemList2" :key="index1">
                  <view class="comment-info">
                    <view class="user-info">
                      <!-- <u-avatar :src="item." size="70"></u-avatar> -->
                      <view class="user">
                        用户
                        <p>{{ formatTime(item.createTime) }}</p>
                      </view>
                      <view class="user-rate">
                        <p>非常满意</p>
                        <u-rate></u-rate>
                      </view>
                    </view>
                  </view>
                  <view class="comment-content">
                    <view class="">
                      {{ item.content }}
                    </view>
                    <view class="comment-img">
                      <image :src="item.picUrls" mode=""></image>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </z-paging>
        </swiper-item>
      </swiper>
    </z-paging-swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      usreId: '',
      current: 0,
      tabsList: [
        {
          name: '施工案例'
        },
        {
          name: '雇主评论'
        }
      ],
      userInfo: {
        name: ''
      },
      itemList1: [],
      itemList2: []
    }
  },
  onLoad(e) {
    this.userId = e.id
    this.$u.get('/app-api/construction/resume/get-by-user-id?userId=' + e.id).then((res) => {
      this.userInfo = res.data
    })
    this.queryList()
  },
  computed: {
    formatTime() {
      return (e) => this.$utils.parseTime(e, '{y}-{m}-{d}')
    }
  },
  methods: {
    tabsChange(e) {
      this.current = e
    },
    transition(e) {
      let dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    animationfinish(e) {
      this.current = e.detail.current
      this.$refs.uTabs.setFinishCurrent(e.detail.current)
      if (this.current) {
        this.queryList2()
      } else {
        this.queryList()
      }
    },
    queryList(pageNo = 1, pageSize = 10) {
      this.$u.get(`/app-api/construction/project-case/page?userId=${this.userId}`).then((res) => {
        this.$refs.paging1.complete(res.data.list)
      })
    },

    queryList2(pageNo = 1, pageSize = 10) {
      this.$u
        .get(`/app-api/construction/project-comment/page?userId=${this.userId}`)
        .then((res) => {
          this.$refs.paging2.complete(res.data.list)
        })
    },

    routeTo(e) {
      uni.navigateTo({
        url: '/other/construction-team-case/construction-team-case?info=' + JSON.stringify(e)
      })
    }
  }
}
</script>

<style>
page {
  height: 100%;
  background: #eeeeef;
}

.container {
  padding: 20rpx;
}

.info_box {
  width: 700rpx;
  background-color: #ffffff;
  padding: 15rpx;
}

.info_box-top {
  overflow: auto;
}

.info_box-title {
  position: relative;
  font-size: 45rpx;
  margin: 15rpx 0;
}

.info_box-title-right {
  position: absolute;
  top: -25rpx;
  right: 0;

  color: #999999;
}
.title-right-item1 {
  font-size: 26rpx !important;
}

.title-right-item2 {
  color: #0f76bc;
}
.content-desc {
  margin-top: 15rpx;
  padding: 15rpx;
  background-color: #fff;
}

.info-view {
  padding: 20rpx;
  background-color: #fff;
  margin-top: 20rpx;
}

.info-top {
  margin: 15rpx 0;
  position: relative;
}

.info-top text {
  font-size: 33rpx;
  font-weight: 700;
}

.sign {
  display: inline-block;
  font-size: 28rpx;
  padding: 8rpx 18rpx;
  background-color: #8cc340;
  color: #fff;
  border-radius: 30rpx;
  margin-left: 10rpx;
}

.sign-info {
  font-size: 30rpx;
  color: #999999;
}

.info-top-btn {
  position: absolute;
  top: 0;
  right: 2rpx;
  display: inline-block;
  font-size: 32rpx;
  padding: 10rpx 20rpx;
  background-color: #0f76bc;
  border-radius: 30rpx;
  color: #fff;
}

.info-desc {
  font-size: 32rpx;
  overflow: hidden;
}

.tabsView {
  background-color: #fff;
  margin-top: 20rpx;
  background-color: #fff;
}
.content-imgs {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.content-box {
  width: 700rpx;
  background-color: #fff;
  padding: 20rpx;
  margin-top: 20rpx;
}
.content-box-desc {
  margin: 15rpx 0;
  font-size: 32rpx;
}
.content-box-address {
  color: #999999;
}

.comment-box {
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 10rpx;
}

.comment-top {
  overflow: auto;
}

.txt1 {
  font-size: 35rpx;
  float: left;
}

.txt2 {
  float: right;
  color: #7e7e5e;
}

.comment-info {
  overflow: auto;
  margin: 15rpx 0;
}
.comment-info-left {
  float: left;
  width: 45%;
}

.info-left-username {
  display: inline-block;
  vertical-align: top;
}

/* 评论 */

.comment-info-right {
  float: right;
}

.info-left-tx {
  width: 90rpx;
  height: 90rpx;
  border-radius: 90rpx;
}

.comment-img image {
  width: 200rpx;
  height: 200rpx;
  margin-right: 10rpx;
}
</style>
